<!--
 * @Description: Arrow
 * @Author: seadon
 * @LastEditors: seadon
 * @Date: 2021-07-16 10:02:16
 * @LastEditTime: 2022-04-19 16:44:22
-->
<template>
	<span :class="getClass">
		<i class="low-code iconxiangyou1" v-if="isMore"></i>
		<i class="low-code iconxiangyou11" v-else></i>
	</span>
</template>
<script setup lang="ts">
import { computed, defineProps } from 'vue'

const props = defineProps({
	expand: { type: Boolean },
	up: { type: Boolean },
	down: { type: Boolean, default: true },
	inset: { type: Boolean },
})

const getClass = computed(() => {
	const { expand, up, down, inset } = props
	return [
		'pok-basic-arrow',
		{
			['pok-basic-arrow__active']: expand,
			up,
			inset,
			down,
		},
	]
})
</script>
<style lang="less" scoped>
@prefix-cls: ~'pok-basic-arrow';

.@{prefix-cls} {
	display: inline-block;
	color: @rok-icon-default-color;
	cursor: pointer;
	transform: rotate(0deg);
	transition: all 0.3s ease 0.1s;
	transform-origin: center center;

	&__active {
		transform: rotate(180deg);
	}

	&.inset {
		line-height: 0px;
	}

	&.up {
		transform: rotate(180deg);
	}

	&.down {
		transform: rotate(180deg);
	}

	&.up.@{prefix-cls}__active {
		transform: rotate(90deg);
	}

	&.down.@{prefix-cls}__active {
		transform: rotate(-180deg);
	}
}
</style>
